<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-手机登录</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
<div class="mobile_login_top clearfix">
    <a href="index.html" class="mobile_login_logo"><img src="images/logo02.png"></a>
</div>
<div class="login_form_bg">
    <div class="mobile_login_form_wrap clearfix">
        <div class="mobile_login_banner fl"></div>
        <div class="mobile_slogan fl">商品美 · 种类多 · 欢迎光临</div>
        <div class="mobile_login_form fr">
            <div class="mobile_login_title clearfix">
                <a href="javascript:;" class="cur">手机登录</a>
            </div>
            <div class="mobile_reg_form clearfix" id="app" v-cloak>
                <form method="post" @submit.prevent="on_submit">

                    <ul>
                        <li>
                            <input @blur="check_mobile" v-model="mobile" type="text" name="mobile" id="mobile"
                                   placeholder="请输入手机号">
                            <span v-show="error_mobile" class="mobile_error_tip">{{error_mobile_message}}</span>
                        </li>
                        <li>
                            <input type="text" v-model="image_code" @blur="check_image_code" name="image_code"
                                   id="pic_code" class="mobile_msg_input" placeholder="请输入图形验证码">
                            <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="mobile_pic_code">
                            <span v-show="error_image_code"
                                  class="mobile_error_tip">{{ error_image_code_message }}</span>
                        </li>
                        <li>
                            <input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code"
                                   class="mobile_msg_input" placeholder="请输入短信验证码">
                            <a @click="send_sms_code" class="mobile_get_msg_code">{{ sms_code_tip }}</a>
                            <span class="mobile_error_tip" v-show="error_sms_code">{{ error_sms_code_message }}</span>
                        </li>
                        <div class="mobile_more_input clearfix">
                            <input type="checkbox" v-model="remember">
                            <label>记住登录</label>
                        </div>
                        <li class="mobile_reg_sub">
                            <input type="submit" value="登 录">
                        </li>
                    </ul>
                    <div class="mobile_third_party">
                        <a @click="qq_login" class="qq_login">QQ</a>
                        <a href="#" class="weixin_login">微信</a>
                        <a href="/login.html" class="account_login">账户登录</a>
                        <a href="/register.html" class="mobile_register_btn">立即注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/mobile_login.js"></script>
</body>
</html>